Next 배우기 v.01

1. next / react / react-dom 설치

 npm init -y
 npm i next@latest react@latest react-dom@latest

2. 페이지 라우팅

  • 위와 같이 next에서는 app으로 된 폴더 안에 page를 생성해야 하고 app 폴더에 있는 page.tsx는 기본 시작 페이지다.
  • 파일명이 url주소이고 실질먹인 페이지는 page.tsx이다.
  • 폴더명에 (소괄호)을 사용하면 url주소와 상관없이 폴더로 파일을 정리할 수 있다.

  • Dynamic Routes(다이나믹 라우트)
  • 폴더명에 [대괄호]을 사용하면 하나의 컴포넌트를 사용하여 변화된 데이터를 수용할 수 있는 페이지를 만들수 있다.

3. metadata

  • 루트 레이아웃에서 "%s" 을 작성해주면 다른 페이지에서는 직접 title을 지정해주면 된다.

4. layout

  • 레이아웃은 폴더마다 중첩이 가능하다.

  • 이런식으로 root layout에서 navigation을 설정하면 네비게이션바를 고정할 수 있다.